<?php /*a:3:{s:63:"D:\phpstudy_pro\WWW\oldi-erp\app\admin\view\products\index.html";i:1748238034;s:67:"D:\phpstudy_pro\WWW\oldi-erp\app\admin\view\public\header_vue3.html";i:1748225003;s:66:"D:\phpstudy_pro\WWW\oldi-erp\app\admin\view\public\wangEditor.html";i:1748225003;}*/ ?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ERP</title>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'G-SHGH6Q51ZE');
      </script>

    <link rel="stylesheet" href="/static/css/element-plus.css">
    <script src="/static/js/vue3.js"></script>
    <script src="/static/js/element-plus.js"></script>
    <script src="/static/js/element-plus-icon.js"></script>
    <script src="/static/js/axios.js"></script>
    <script src="/static/js/qs.js"></script>
    <script src="/static/js/config.js"></script>
    <script src="/static/js/moment.js"></script>
    <script src="/static/js/zhCNForElementPLUS.js"></script>
    <script src="//unpkg.com/@element-plus/icons-vue"></script>


<link href="/static/css/wang-editor.css" rel="stylesheet"></link>
<script src="/static/js/wang-editor.js"></script>

<style>
    body {
        padding: 10px;
    }
    .el-table .success-row {
        background: #f0f9eb;
    }
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .danger-row {
        background: #e78787;
    }

    #editor—wrapper {
      border: 1px solid #ccc;
      z-index: 100; /* 按需定义 */
    }

    #toolbar-container {
      border-bottom: 1px solid #ccc !important;
    }

    #editor-container {
        min-height: 400px;
    }
    .scrollable-dialog .el-dialog__body {
        max-height: 70vh;
        overflow-y: auto;
    }    


       
</style>

</head>

<body>
<div id="app" v-cloak>
    <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>产品管理</el-breadcrumb-item>
        <el-breadcrumb-item>产品列表</el-breadcrumb-item>
    </el-breadcrumb>
        <br>
     <el-card >
        <div style="display: flex;align-items: center;justify-content: flex-start;">
            <el-form :inline="true" :model="searchForm" size="small"  ref="refsearchForm">                
                <el-form-item label="产品名称">                     
                     <el-input v-model="searchForm.name" placeholder="请输入产品名称" filterable clearable></el-input>
                </el-form-item>  
                <el-form-item label="产品分类">                     
                    <el-cascader v-model="searchForm.c_id"   :options="catego"  :props="{ checkStrictly: true , emitPath: false  }"  clearable ></el-cascader>                            
               </el-form-item>       
               <el-form-item label="产品仓库">                     
                   <el-select v-model="searchForm.storage_id" placeholder="请选择产品仓库" filterable clearable>
                       <el-option v-for="item in storagelist"  :key="item.id" :label="item.name" :value="item.id"></el-option>
                   </el-select>
              </el-form-item>    
              <el-form-item label="产品款号">                     
                   <el-input v-model="searchForm.localsku" placeholder="请输入产品款号" filterable clearable></el-input>
             </el-form-item> 
             <el-form-item label="产品供应商">                     
                <el-select v-model="searchForm.s_id" placeholder="请选择产品供应商" filterable clearable>
                    <el-option v-for="item in supplier"  :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
             </el-form-item>
             <el-form-item label="产品添加时间">                     
                <el-date-picker  v-model="searchForm.createtime"  type="daterange" align="right"  unlink-panels="" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
              </el-date-picker>
             </el-form-item>
             <el-form-item label="产品状态">
                <el-select v-model="searchForm.status" placeholder="请选择产品状态" filterable clearable>
                    <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item> 

            <el-form-item>             
                <el-button type="primary"  size="small" plain @click="getSearch"  v-cloak>
                    <el-icon style="vertical-align: middle"><Search /></el-icon>                    
                <span style="vertical-align: middle"> 查询 </span>
               </el-button>
            </el-form-item>          
            </el-form>
            
            <div style="margin-left: auto;margin-bottom: 20px;margin-right: 20px;" >
                    <el-button  type="primary"   @click="create" size="small" >
                        <el-icon style="vertical-align: middle">
                        <Edit />
                    </el-icon>
                     <span style="vertical-align: middle">  添加产品名称 </span></el-button>       
            </div>
            <div style="margin-left: auto;margin-bottom: 20px;margin-right: 20px;" >
                    <el-button    @click="gatherproduct" size="small" >
                        <el-icon style="vertical-align: middle">
                        <Edit />
                    </el-icon>
                     <span style="vertical-align: middle">  产品采集 </span></el-button>       
            </div>
        </div>      

       
        <el-table  :data="tablelist" style="width: 100%;margin-bottom: 20px;margin-top: 20px;" row-key="id"   border     class="hide-tree-arrow"  :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column  prop="img" label="商品图片" sortable width="120">
                <template v-slot="{row}">
                    <el-image :preview-teleported="true" :z-index="999999" :src="row.img" style="width:100;height:50px" :preview-src-list="[row.img]"   /></el-image>
                </template>
            </el-table-column>
            <el-table-column  prop="title" label="商品名称" ></el-table-column>
            <el-table-column  prop="localsku" label="商品款号" width="180"></el-table-column>
            <el-table-column  prop="price" label="产品价格" width="100"></el-table-column>
            <el-table-column  prop="code" label="条码" width="110"></el-table-column>            
            <el-table-column  prop="catego_name" label="商品分类" width="100"></el-table-column>
            <el-table-column  prop="supplier_name" label="产品供应商" width="100" ></el-table-column>
            <el-table-column  prop="storage_name" label="所属的仓库" width="100" ></el-table-column>   
            <el-table-column  prop="place" label="货架" width="100" ></el-table-column>               
            <el-table-column   prop="status"  label="状态" width="100">
                <template v-slot="{row}">
                    <span v-if="row.status===1">
                        <el-tag type="success">上架</el-tag>
                     </span>
                     <span   v-if="row.status===0">
                        <el-tag type="danger">下架</el-tag>                                                
                    </span>     
                   
                </template>

             </el-table-column>
            <el-table-column  prop="createtime" label="添加时间"  width="160"></el-table-column>      
            <el-table-column  fixed="right" label="操作" width="300">
                <template v-slot="{row}">            
                    <el-button type="primary"plain @click="editors(row)" >   
                        <el-icon style="vertical-align: middle"> <Edit /></el-icon>
                        <span style="vertical-align: middle"> 编辑 </span>
                    </el-button>        
                    <el-button type="info"  plain  v-if="row.pid == 0"  @click="lookup(row)" >
                        <el-icon style="vertical-align: middle"> <Search  /> </el-icon>
                        <span style="vertical-align: middle"> 查看</span> 
                    </el-button>        
                    <el-button type="danger"  plain v-if="row.status==1"   @click="cancel(row,0)">  
                        <el-icon style="vertical-align: middle"> <Delete  />  </el-icon>
                        <span style="vertical-align: middle"> 下架</span>                        
                    </el-button>    
                    <el-button type="success"  plain  v-if="row.status==0"   @click="cancel(row,1)">  
                        <el-icon style="vertical-align: middle"> <Delete  />  </el-icon>
                        <span style="vertical-align: middle"> 上架</span>
                    </el-button>             
                   
                </template>
            </el-table-column>      
             
        </el-table>  
        <!-- page -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.pagenum" :page-sizes="[20,50,100, 150, 300,500,1000,2000]"
            :page-size="searchForm.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>        
    </el-card>


        <el-dialog :title="title" v-model="dialogVisible"  width="900px" :close-on-click-modal="false"  :visible.sync="dialogVisible" custom-class="scrollable-dialog">
            <el-form :model="createForm"  ref="refeditForm" :rules="isProductsrules" >

                <el-form-item label-width="100px" prop="title" label="产品名称" >
                    <el-input v-model="createForm.title" placeholder="请输入产品名称"  clearable></el-input>
                </el-form-item>              
                <el-row :gutter="20">
                    <el-col :span="12">                      
                        <el-form-item label-width="100px" prop="s_id" label="产品供应商">
                            <el-select v-model="createForm.s_id" style="width: 330px;"    clearable>
                                <el-option v-for="item in is_supplier" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label-width="100px"  label="所属仓库">
                            <el-select v-model="createForm.storage_id" style="width: 330px;"   clearable >
                                <el-option v-for="(item,index) in is_storage"  :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>    
                </el-row>
       
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label-width="100px" prop="price`" label="产品价格" >
                            <el-input-number v-model="createForm.price"  :precision="2" :step="0.1" :max="1000" placeholder="产品价格" ></el-input-number>                 
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label-width="100px" label="产品货架" >
                            <el-input v-model="createForm.place" placeholder="请输入产品货架" style="width: 330px;"  clearable></el-input>
                        </el-form-item>
                    </el-col>    
                </el-row>       
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label-width="100px" prop="localsku`" label="产品款号" >
                            <el-input v-model="createForm.localsku" placeholder="请输入产品款号"  clearable :disabled="isDisabled" ></el-input>
                        </el-form-item>     
                         
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label-width="100px" prop="c_id" label="产品分类" >
                            <el-cascader v-model="createForm.c_id"   :options="catego"  :props="{ checkStrictly: true , emitPath: false  }"  style="width: 370px;" clearable :disabled="isDisabled"  @change="changeCatego"></el-cascader>                            
                        </el-form-item  >      
                    </el-col>    
                </el-row>
       
         
                <el-form-item label-width="100px" prop="content"  v-if="attributeVisible">
                    <el-card  style=" width: 100%;margin-top: 5px;" v-for="(item,index) in attavleCatego"  >
                       
                        <el-row :gutter="23">
                            <el-col :span="3">                           
                                {{item.name}} 
                            </el-col>
                            <el-col :span="21"  >
                                <el-row>                         
                                    <el-col :span="6"  v-for="(item1,index1) in item.values">
                                        <el-checkbox-group v-model="createForm.attribute[index]">
                                            <el-checkbox :label="item1"></el-checkbox>                       
                                          </el-checkbox-group>
                                    </el-col>   
                                </el-row>             
                            </el-col>    
                        </el-row>
               
                    </el-card>
                  
                </el-form-item>
             
                <el-form-item label-width="100px" prop="content" label="产品详情">                
                    <div id="editor—wrapper">
                        <div id="toolbar-container"><!-- 工具栏 --></div>
                        <div id="editor-container"></div>
                    </div>
                </el-form-item>
                <el-form-item label-width="100px" prop="img" label="商品主图">
              
                            <el-upload
                            action="/admin/products/create"
                            list-type="picture-card"
                            :on-preview="handlePictureCardPreview"
                            :on-success="handleAvatarSuccess"
                            :on-remove="handleRemove">
                            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                            </el-upload>
                            <el-dialog :visible.sync="dialogImgVisibles">
                                <img width="100%" :src="img" alt="">
                            </el-dialog>
                            <div  v-if="dialogImgVisible" style="width: 148px;height: 148px;margin-left: 10px;">
                                <img width="100%" :src="imgs" alt="" style="width: 148px;height: 148px;border-radius: 6px;">
                            </div>  
                    </el-row>  
                </el-form-item>            
            </el-form>
            <div>                                   
                <el-form-item>
                    <el-button type="primary" @click="checkSubmits">确认</el-button>
                    <el-button type="primary" plain @click="close"> 取消</el-button>
                </el-form-item>
            </div>
        </el-dialog>

           <el-dialog :title="title" v-model="gatherVisible"  width="900px" :close-on-click-modal="false"  :visible.sync="dialogVisible" custom-class="scrollable-dialog">
            <el-form :model="gatherForm"  ref="gatheritForm" :rules="isgatherrules" >

                <el-form-item label-width="100px" prop="url" label="1688链接" >
                    <el-input v-model="gatherForm.url" placeholder="请输入1688链接 ,例如:https://1688.com/item/1234567890"  clearable></el-input>
                </el-form-item>  
             </el-form>
            <div>                                   
                <el-form-item>
                    <el-button type="primary" @click="gatheritSubmits">采集</el-button>
                    <el-button type="primary" plain @click="closegather"> 取消</el-button>
                </el-form-item>
            </div>
        </el-dialog>

</div>
</body>
<script>
let { createApp } = Vue;

const {
  createEditor,
  createToolbar
} = window.wangEditor;

let app = createApp({
    el: '#app',
    data: function () {
        return {
            supplier:<?php echo $supplierfo; ?>,//全部供应商     
            is_supplier:<?php echo $is_supplier; ?>,//状态正常的供应商  
            storagelist:<?php echo $storagelist; ?>,//全部仓库
            is_storage:<?php echo $is_storage; ?>,//状态正常的仓库        
            
            tablelist: [],
            catego:[],
            attavleCatego:[],
            isDisabled:false,//控制分类是否可以选择
            searchForm: {
                c_id:'',
                s_id:'',
                storage_id:'',
                localsku:'',            
                title: '',
                status: '',
                createtime:'',
                pagenum: 1,
                pagesize: 20
            },
            createForm:{                
                content:'',
                status:1,
                localsku:'',
                price:0,
                id:'',
                title:'',
                c_id:'',
                place:'',
                storage_id:'',
                pid:'',
                s_id:'',
                img:'',
                attribute:[]                
              },
              status:[
                {
                    value: 2,
                    label: '下架'
                },
                {
                    value: 1,
                    label: '上架'
                }
            ],// 状态是否正常       
            imgs:'',
            editForm:{
                'pid':'',
                'type':'',
                 'id':'',
            },
            gatherForm:{
                url:'',
            },
            gatherVisible:false,//采集的弹窗
            attributeVisible:false,//控制属性
            dialogVisible:false,
            dialogImgVisibles:false,
            dialogImgVisible:false, 
            title:'',
            isProductsrules: {
                title: [
                    {required: true, message: '请输入产品名称', trigger: 'blur'}
                ],
                s_id: [
                    {required: true, message: '请选择供应商', trigger: 'change'}
                ],
                c_id: [
                    {required: true, message: '请选择分类', trigger: 'change'}
                ],
                price: [
                    {required: true, message: '请输入产品价格', trigger: 'blur'}
                ],
                img:[
                    {required: true, message: '请输入请上传图片', trigger: 'blur'}
                ],
                content: [
                    {required: true, message: '请输入产品详情', trigger: 'blur'}
                ],
                localsku:[
                    {required: true, message: '请输入产品款号', trigger: 'blur'}
                ]

            },  
            isgatherrules:{
                url: [
                    {required: true, message: '请输入产品链接', trigger: 'blur'}
                ], 
            },
            editor:'',  
            pickerOptions: {
            shortcuts: [{
                text: '最近一周',
                onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                    }
                }]
            },     
        }
    },
    mounted(){
          this.getSearch()
          this.cogetDatalist()
      },
    methods: {       

        async getDatalist() {        
            const res = await axios.post('/admin/products/index', { params: this.searchForm })
            if (res.status !== 1) {
                return this.$message.error(res.info);
            }
            this.total = res.info.total
            this.tablelist = res.info.list
           
        },
        handleSizeChange(newSize) {
            this.searchForm.pagesize = newSize
            this.getDatalist()
        },
        handleCurrentChange(newPage) {
            this.searchForm.pagenum = newPage
            this.getDatalist()
        },
        getSearch() {
            this.searchForm.pagenum = 1
            this.getDatalist()
        },
        create() {
            this.attributeVisible=false;
            this.title = '新增产品信息';
            this.createForm.content='';
            this.createForm.id='';
            this.createForm.status=1;
            this.createForm.price=0;
            this.createForm.title='';
            this.createForm.c_id='';
            this.createForm.localsku='';
            this.createForm.place='';
            this.createForm.storage_id='';
            this.createForm.s_id='';
            this.createForm.img='';
            this.createForm.attribute=[];         
            this.attavleCatego=[]      
            this.dialogVisible = true;
            this.setRichText(this.createForm.content);          
           
        },
        editors(row) {       
            this.createForm=JSON.parse(JSON.stringify(row));
            this.fileList = [];
                if(this.createForm.img !=''){
                    this.imgs = this.createForm.img;
                }     
            this.isDisabled=true;
            this.dialogImgVisible=true;          
            this.title = '编辑产品信息';
            this.dialogVisible = true;
            this.setRichText(this.createForm.content);
        },
        //查看详情
        lookup (row){
            window.location.href = "/admin/products/dateils?id="+row.id
        },
        //获取分类的列表
        async cogetDatalist() {        
            const res = await axios.post('/admin/products/product_list',{type:1})           
            if (res.status !== 1) {
                return  this.$message.error(res.info);             
            }
            this.catego = res.info;
        },
      

        setRichText(text){
            const editorConfig = {
                placeholder: "请输入产品详情",
                onChange: (e) => {
                    let content = e.getHtml();
                    if (content === "<p><br></p>") {
                        this.createForm.content = "";
                    } else {
                        this.createForm.content = content;
                    }
                },
                MENU_CONF: {
                    uploadImage: {
                        server: "/admin/products/create",
                        fieldName: "file",
                        customInsert(res, insertFn) {
                            if (res.status != 1) {
                                return ElementPlus.ElMessage.error("上传文件失败");
                            }
                            insertFn(res.info);
                        },
                    },
                },
            };

            this.$nextTick(() => {
                if (!this.editor) {
                    this.editor = createEditor({
                        placeholder: "请输入产品详情",
                        selector: "#editor-container",
                        html: text,
                        config: editorConfig,
                        mode: "default",
                    });
                } else {
                    this.editor.setHtml(text);
                }

                if (!this.toolbar) {
                    this.toolbar = createToolbar({
                        editor: this.editor,
                        selector: "#toolbar-container",
                        mode: "simple",
                    });
                }
            });
        },

    

        async checkSubmits() {        
            this.$refs.refeditForm.validate(async valid => {
                if (!valid) return
                let loading = this.$loading({
                    lock: true,
                    text: '数据提交中···',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });     
                const res = await axios.post('/admin/products/create', { params: this.createForm })
                loading.close()
                if (res.status !== 1) {
                    return this.$message.error(res.info);
                } 
                this.$message.success('操作成功');
                this.dialogVisible = false;
                this.getDatalist()
            })
        },
        //选择分类
         async changeCatego(val) {
            this.createForm.attribute = [];
            const res = await axios.post('/admin/products/product_list',{type:2,id:val})           
            if (res.status !== 1) {
                return  this.$message.error(res.info);             
            }
            this.attributeVisible=false;
            this.attavleCatego = res.info;
            if( this.attavleCatego.length > 0 )  {
                this.attributeVisible=true;
            }
            
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            console.log(file.url);
            this.img = file.url;
    
            this.dialogImgVisibles = true;
            this.imgs='',
            this.dialogImgVisible=false;
        },
        handleAvatarSuccess(res, file) {
        this.imgs='',
        this.dialogImgVisible=false;
        this.createForm.img = res.info;
          
        },
        async cancel(row,type){
            this.editForm.id=row.id;
            this.editForm.pid=row.pid;
            this.editForm.type=type;
            if(row.pid==0 && type==0){
                //是父体
                this.$confirm('确认需要修改是下架这款产品，如果修改了子级的产品也会跟着下架？', '提示', {
                    confirmButtonText: '确定修改',
                    cancelButtonText: '取消修改',
                    closeOnClickModal: false, // 禁用点击遮罩关闭弹窗
                    type: 'warning'
                }).then(() => {
                    let loading = this.$loading({
                        lock: true,
                        text: '正在下架处理中',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    axios.post('/admin/products/update_status', {params: this.editForm}).then(res => {
                        loading.close()
                        if (res.status !== 1) {
                            return this.$message.error(res.info);             
                        }                    
                        this.$message.success('修改成功');
                        this.getDatalist()
                    }).catch(err => {
                        console.log(err)
                    })   
                    
                }).catch(() => {
                    this.getDatalist()
                    this.$message.info('已取消修改');
                });
               
            }else if(row.pid>0 && type==0){
             //是子体
             this.$confirm('确认需要修改是下架这款产品？', '提示', {
                    confirmButtonText: '确定修改',
                    cancelButtonText: '取消修改',
                    closeOnClickModal: false, // 禁用点击遮罩关闭弹窗
                    type: 'warning'
                }).then(() => {
                    let loading = this.$loading({
                        lock: true,
                        text: '正在下架处理中···',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    axios.post('/admin/products/update_status', {params: this.editForm}).then(res => {
                        loading.close()
                        if (res.status !== 1) {
                            return this.$message.error(res.info);             
                        }                    
                        this.$message.success('修改成功');
                        this.getDatalist()
                    }).catch(err => {
                        console.log(err)
                    })   
                    
                }).catch(() => {
                    this.getDatalist()
                    this.$message.info('已取消修改');
                });
            }else{
             
       
                let loading = this.$loading({
                    lock: true,
                    text: '正在上架架处理中···',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                axios.post('/admin/products/update_status', {params: this.editForm}).then(res => {
                    loading.close()
                    if (res.status !== 1) {
                        return this.$message.error(res.info);             
                    }                    
                    this.$message.success('修改成功');
                    this.getDatalist()
                })                   
            }

        },
        //关闭弹窗
        close(){
             this.ismenudialogVisible=false  
        },   
        //采集弹窗
        gatherproduct(){
            this.gatherForm.url='';
            this.gatherVisible=true;
            this.title='采集产品信息';
        },
        //关闭采集弹窗
        closegather(){
            this.gatherVisible=false;
        },
        //采集产品
        async gatheritSubmits(){
            this.$refs.gatheritForm.validate(async valid => {
                if (!valid) return
                let loading = this.$loading({
                    lock: true,
                    text: '数据提交中···',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });     
                const res = await axios.post('/admin/products/gather', { params: this.gatherForm })
                loading.close()
                if (res.status !== 1) {
                    return this.$message.error(res.info);
                } 
                this.$message.success('操作成功');
                this.gatherVisible=false;
                this.getDatalist()
            })
        }

    }
})

app.use(ElementPlus,{ locale: ElementPlusLocaleZhCn });

Object.keys(ElementPlusIconsVue).forEach((key) => {
  app.component(key, ElementPlusIconsVue[key]);
});

app.mount("#app");
</script>

</html>